<script setup lang="ts">
import { onMounted, ref } from "vue";
import { usePodProvider } from "../podProvider";
import PodSimpleInfoCard from "./PodSimpleInfoCard.vue";
import PodInfoStatus from "./PodInfoStatus.vue";
import KResourceMetadata from "../../components/KResourceMetadata.vue";
import KResourceEnv from "../../components/KResourceEnv.vue";

const { podDetails, getPodDetails } = usePodProvider();
const activeTab = ref("resource");
const tabList = [
  { label: "资源状态", value: "resource" },
  { label: "调度信息", value: "schedule" },
  { label: "元数据", value: "metadata" },
  { label: "监控", value: "monitor" },
  { label: "环境变量", value: "env" },
  { label: "事件", value: "event" }
];
</script>

<template>
  <div class="info-wrapper">
    <div v-if="podDetails?.pod" class="info-simple">
      <PodSimpleInfoCard :pod="podDetails?.pod" />
    </div>
    <div class="info-body">
      <div class="info-header">
        <el-segmented
          v-model="activeTab"
          :options="tabList"
          :props="{ label: 'label', value: 'value', disabled: 'disabled' }"
          block
        />
      </div>
      <div v-if="podDetails && activeTab === 'resource'" class="info-main">
        <PodInfoStatus
          :pod="podDetails?.pod"
          :replica-set="podDetails?.replicaSet"
        />
      </div>
      <div v-else-if="podDetails && activeTab === 'schedule'" class="info-main">
        <div>调度信息</div>
      </div>
      <div v-else-if="podDetails && activeTab === 'metadata'" class="info-main">
        <KResourceMetadata v-model:model-value="podDetails.pod.metadata" />
      </div>
      <div v-else-if="podDetails && activeTab === 'monitor'" class="info-main">
        <div>监控</div>
      </div>
      <div v-else-if="podDetails && activeTab === 'env'" class="info-main">
        <KResourceEnv :containers="podDetails?.pod?.spec?.containers" />
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.info-wrapper {
  padding: 10px;
  display: flex;
  gap: 10px;
  align-items: flex-start;

  --k-pod-info-card-width: 250px;

  .info-body {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: calc(100% - var(--k-pod-info-card-width));

    .info-header {
      width: 50vw;
      min-width: 500px;
      .el-segmented {
        --el-segmented-item-selected-color: var(--el-color-white);
        --el-segmented-item-selected-bg-color: #2f3e70;
        --el-border-radius-base: 8px;
        padding: 2px;
        background-color: var(--el-segmented-item-selected-color);
        min-height: 40px;
      }
    }

    .info-main {
      flex: 1;
      width: 100%;
      // background-color: var(--el-bg-color);
    }
  }

  .info-simple {
    width: var(--k-pod-info-card-width);
    border-radius: 10px;
    background-color: var(--el-bg-color);
  }
}
</style>
